﻿<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/static/js/jqgrid/bootstrap/searching/toolbar/">
    <!-- 引入自定义的公共脚本 -->
    <script src="<%=request.getContextPath()%>/static/js/owner/jqgrid.js"></script>
    <!-- 引入 moment.js 库，用于处理日期和时间 -->
    <script src="<%=request.getContextPath()%>/static/js/owner/moment.min.js"></script>

    <script src="<%=request.getContextPath()%>/static/css/jqgrid.css"></script>

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- This is the Javascript file of`                                                                     jqGrid -->
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- A link to a Boostrap  and jqGrid Bootstrap CSS siles-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
    <script>
        $.jgrid.defaults.width = 780;
        $.jgrid.defaults.responsive = true;
        $.jgrid.defaults.styleUI = 'Bootstrap';
    </script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/ecmascript" src="../../../js/bootstrap-datepicker.js"></script>
    <script type="text/ecmascript" src="../../../js/bootstrap3-typeahead.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" />

    <meta charset="utf-8" />
</head>
<body>
    <!-- 查询表单区域 -->
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-sm-12">
            <form class="form-inline" id="searchform">
                <div class="form-group">
                    <label for="boxId">机柜编号：</label>
                    <input type="text" class="form-control" id="boxId" name="boxId" placeholder="请输入机柜编号">
                </div>
                <div class="form-group">
                    <label for="isOnline">在线状态：</label>
                    <select class="form-control" id="isOnline" name="isOnline">
                        <option value="">全部</option>
                        <option value="0">离线</option>
                        <option value="1">在线</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="status">使用状态：</label>
                    <select class="form-control" id="status" name="status">
                        <option value="">全部</option>
                        <option value="-1">未入库</option>
                        <option value="0">未配置</option>
                        <option value="1">已发货</option>
                        <option value="2">发货中</option>
                        <option value="3">已使用</option>
                        <option value="4">撤库中</option>
                        <option value="5">已配置（未使用）</option>
                    </select>
                </div>
                <button type="button" class="btn btn-primary" id="searchbtn">查询</button>
                <button type="button" class="btn btn-warning" id="resetbtn">重置</button>
            </form>
        </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="row" style="margin-bottom: 15px;">
        <div class="col-sm-12 text-right">
            <button type="button" class="btn btn-success" id="exportbtn">导出 Excel</button>
        </div>
    </div>

    <!-- jqGrid 表格 -->
    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
<script type="text/javascript">
    var colNames = ['ID','机柜编号','设备型号','入库时间','信号强度','最后使用时间','在线状态','最后在线时间','使用状态',
        '所属门店','发货状态','购买人','购买时间','系统区别','主板编号','所属总代','所属商户','机构id',
        '首次使用时间','二维码','三方平台使用'
    ];

    var colModels = [
        { name: 'id', index: 'id', hidden: true, key: true},
        { name: 'boxId', index: 'boxId'},
        { name: 'modelId', index: 'modelId' },
        { name: 'createTime', index: 'createTime', sortable: true, formatter: formatDate },
        { name: 'signalStrength', index: 'signalStrength', sortable: true },
        { name: 'lastUseTime', index: 'lastUseTime', sortable: true, formatter: formatDate },
        { name: 'isOnline', index: 'isOnline', formatter: function(value, options, row) {return generalFormatter(value, row, options, {'0': '在线', '1': '离线'}, '未知');}},
        { name: 'onlineTime', index: 'onlineTime', sortable: true, formatter: formatDate },
        { name: 'boxStatus', index: 'boxStatus', formatter: function(value, options, row) {return generalFormatter(value, row, options, {'1': '正常', '2': '损坏', '3': '禁用'}, '未知');}},
        { name: 'storeId', index: 'storeId' },
        { name: 'status', index: 'status', formatter: function(value, options, row) {return generalFormatter(value, row, options, {'-1': '未入库', '0': '未配置', '1': '已发货', '2': '发货中', '3': '已使用', '4': '撤库中', '5': '已配置为使用'}, '未知');}},
        { name: 'buyPerson', index: 'buyPerson' },
        { name: 'buyTime', index: 'buyTime', sortable: true, formatter: formatDate },
        { name: 'systemApart', index: 'systemApart' },
        { name: 'deviceName', index: 'deviceName' },
        { name: 'generalAgent', index: 'generalAgent' },
        { name: 'merchantNumber', index: 'merchantNumber' },
        { name: 'organizedId', index: 'organizedId' },
        { name: 'firstUsetime', index: 'firstUsetime', sortable: true, formatter: formatDate },
        { name: 'qrCode', index: 'qrCode', formatter: function(value, options, row) {return formatImage(value, row, options, 100, 100, '二维码');}},
        { name: 'thirdOpertype', index: 'thirdOpertype', formatter: function(value, options, row) {return generalFormatter(value, row, options, {'0': '融邦', '1': '青创', '2': '佰创'}, '未知');}}
    ];

    $(document).ready(function () {
        const pageConfig = {
            url: '<%=request.getContextPath()%>/tChargeBox/listByCondition',  // 数据源URL
            colNames: colNames,
            colModel: colModels,
        };
        initializeJqGrid(pageConfig);
    });

    // 查询按钮点击事件
    $("#searchbtn").on("click", function () {
        const params = {
            boxId: $("#boxId").val(),
            isOnline: $("#isOnline").val(),
            status: $("#status").val()
        };
        $("#jqGrid").jqGrid("setGridParam", {
            postData: params,
            page: 1
        }).trigger("reloadGrid");
    });

    // 重置按钮点击事件
    $("#resetbtn").on("click", function () {
        $("#searchform")[0].reset(); // 重置表单
        $("#jqGrid").jqGrid("setGridParam", {
            postData: {},
            page: 1
        }).trigger("reloadGrid");
    });

    // 导出按钮点击事件
    $("#exportbtn").on("click", function () {
        const params = {
            boxId: $("#boxId").val(),
            isOnline: $("#isOnline").val(),
            status: $("#status").val()
        };
        const query = $.param(params);
        const exportUrl = `<%=request.getContextPath()%>/tChargeBox/exportExcel?${query}`;
        window.location.href = exportUrl; // 下载 Excel 文件
    });
</script>
<style>
    .ui-jqgrid .ui-th-column > .ui-th-div {
        padding-left: 0px;
    }
    .ui-th-column ui-th-ltr jqgrid-multibox {
        padding-left: 0px;

    }
    /*表头默认是左对齐的，可以通过自定义 CSS 设置表头文字居中：*/
    .ui-jqgrid .ui-jqgrid-htable th {
        text-align: center; /* 表头文字居中 */
        /*vertical-align: middle; !* 垂直居中 *!*/
    }
    /*.ui-jqgrid .ui-jqgrid-htable th div.ui-jqgrid-sortable {*/
    /*    display: flex; !* 使用 Flexbox *!*/
    /*    justify-content: center; !* 水平居中 *!*/
    /*    align-items: center; !* 垂直居中 *!*/
    /*}*/

    .ui-jqgrid .ui-jqgrid-btable td {
        padding: 0;              /* 去掉单元格的内边距 */
        line-height: normal;     /* 重置行高，防止内容被额外撑大 */
        vertical-align: middle;  /* 垂直居中 */
        text-align: center;      /* 水平居中 */
    }

    .ui-jqgrid .cbox {
        margin: 0 auto; /* 水平居中复选框 */
        display: block;
    }
</style>
</body>
</html>
